<template>
  <div class="content_box" v>
    <p class="head_title">缴费管理</p>
    <div class="box1">
      <p class="bk_bj_on" v-if="bailInfo.status == 9"></p>
      <p class="bk_bj" v-else></p>
      <div class="nr">

        <img class="mc" v-if="bailInfo.status == 9" src="@/assets/mc1.png" alt="" />
        <img class="mc" v-else src="@/assets/mc.png" alt="">

        <!-- 缴费步骤 -->
        <div class="top_box">
          <div class="top_msg">
            <img class="left-icon" v-if="bailInfo.status == 9" src="@/assets/icon1_1.png" alt="" />
            <img class="left-icon" v-else src="@/assets/icon1.png" alt="">
            
            <div class="bz_msg">
              <div class="bz">
                <div>
                  <img class="icon" src="@/assets/icon2.png" alt="" />
                  <p class="text">生成二维码</p>
                  <img class="line" src="@/assets/icon5.png" alt="" />
                </div>
                <div>
                  <img class="icon" src="@/assets/icon3.png" alt="" />
                  <p class="text">银行处理中</p>
                  <img class="line" src="@/assets/icon5.png" alt="" />
                </div>
                <div>
                  <img class="icon" src="@/assets/icon4.png" alt="" />
                  <p class="text">缴费成功</p>
                </div>
              </div>

              <p class="name" v-if="bailInfo.status == 9">缴费失败</p>
              <p class="name" v-else-if="bailInfo.status == 0">待缴费</p>
              <p class="name" v-else>缴费中</p>

              <div class="price on" v-if="bailInfo.status == 9">
                缴费金额：
                <p>{{ bailInfo.amount_alias }}</p>
              </div>

              <div class="price" v-else>
                缴费金额：<p>{{ bailInfo.amount_alias }}</p>
              </div>
              
              <!-- <div class="label">
                <p class="on1">取保中</p>
                <p class="on2">逾期2天</p>
              </div> -->
            </div>
          </div>
          <div class="ewm">
            <div class="an" @click="scanEwmClick" v-if="bailInfo.status == 8">
              <img class="icon" src="@/assets/ewm.png" alt="">
              扫码缴费
            </div>
            <el-dropdown @click="handleCommand" placement="bottom-end" @visible-change="openButton(bailInfo.id)" style="margin-left:12px" trigger="click">
              <el-button type="primary">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu :split-button="false">
                  <!-- v-if="anniuStatus.apply_bail_delay" -->
                  <el-dropdown-item @click="downClick(1,bailInfo.bail_id)" v-if="anniuStatus.apply_bail_delay" divided>案件延期申请</el-dropdown-item>
                  <el-dropdown-item @click="downClick(2,bailInfo.bail_id)" v-if="anniuStatus.update_origin_attr" divided>更新原始凭证</el-dropdown-item>
                  <el-dropdown-item @click="downClick(4,bailInfo.bail_id)" v-if="anniuStatus.save_bail_date" divided>修改办案日期</el-dropdown-item>
                  <el-dropdown-item @click="downClick(5,bailInfo.bail_id)" v-if="anniuStatus.entrust" divided>委托协办单位</el-dropdown-item>
                  <el-dropdown-item @click="downClick(6,bailInfo.bail_id)" v-if="anniuStatus.save_bail_bank" divided>修改办案预留银行卡</el-dropdown-item>
                  <el-dropdown-item @click="downClick(7,bailInfo.bail_id)" v-if="anniuStatus.update_department" divided>修改办案单位</el-dropdown-item>
                  <el-dropdown-item @click="downClick(8,bailInfo.bail_id)" v-if="anniuStatus.save_bail_police" divided>修改办案人</el-dropdown-item>
                  <el-dropdown-item @click="downClick(9,bailInfo.bail_id)" v-if="anniuStatus.save_crime_info" divided>完善当事人信息</el-dropdown-item>
                  <el-dropdown-item @click="downClick(10,bailInfo.bail_id)" v-if="anniuStatus.revoke_qrcode" divided>撤销缴费申请</el-dropdown-item>
                  <el-dropdown-item @click="downClick(3,bailInfo.bail_id)" v-if="anniuStatus.close_bail" divided>
                    <el-button style="width:100%" type="primary">关闭本案</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>

        <!-- 案件信息 -->
        <div class="xinxi_box" v-if="bailInfo.bail">
          <p class="title_box">案件信息</p>
          <div class="box">
            <p class="title">案件编号</p>
            <p class="text">{{ bailInfo.bail.case_code }}</p>
            <!-- <p class="label">多个10人 </p> -->
          </div>
          <div class="box">
            <p class="title">案件名称</p>
            <p class="text">{{ bailInfo.bail.case_title }}</p>
          </div>
          <div class="box">
            <p class="title">办案单位</p>
            <p class="text">{{ bailInfo.department.name }}</p>
          </div>
          <div class="box">
            <p class="title">执行机构</p>
            <p class="text">重庆市江津区字市派出所</p>
          </div>
          <div class="box">
            <p class="title">办案人员</p>
            <p class="text">{{ bailInfo.baar_xm }}</p>
            <p class="label1">警员</p>
          </div>
          <div class="box">
            <p class="title">办案人员手机号</p>
            <p class="text">{{ bailInfo.bamj_mobile }}</p>
          </div>
        </div>

        <!-- 基本情况 -->
        <div class="xinxi_box" v-if="bailInfo.bail">
          <p class="title_box">基本情况</p>
          <div class="box">
            <p class="title">嫌疑人</p>
            <p class="text">{{ bailInfo.bail.crime_name }}</p>
          </div>
          <div class="box">
            <p class="title">身份证号</p>
            <p class="text">{{ bailInfo.bail.crime_idcard }}</p>
          </div>
          <div class="box">
            <p class="title">出生日期</p>
            <p class="text">1976-05-11</p>
          </div>
          <div class="box">
            <p class="title">家庭住址</p>
            <p class="text">{{ bailInfo.bail.crime_address }}</p>
          </div>
        </div>

        <p class="hx_line"></p>

        <!-- 日期 -->
        <div class="xinxi_box" v-if="bailInfo.bail">
          <p class="title_box">日期</p>
          <div class="box">
            <p class="title">起算日期</p>
            <p class="text">{{ bailInfo.bail.start_date }}</p>
          </div>
          <div class="box">
            <p class="title">解除日期</p>
            <p class="text">{{ bailInfo.bail.end_date }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 预留银行卡信息 -->
    <div class="box2" v-if="bankMsg.relation_ships">
      <div class="xinxi_box">
        <p class="title_box">预留银行卡信息</p>

        <div class="bank_msg">
          <div class="head">
            <p>银行名称</p>
            <p>姓名</p>
            <p>银行卡卡号</p>
            <p>关系</p>
          </div>
          <div class="c_ont">
            <p>{{ bankMsg.bank_name }}</p>
            <p>{{ bankMsg.card_name }}</p>
            <p>{{ bankMsg.card_idcard }}</p>
            <p>{{ bankMsg.relation_ships.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 执行取保候审 -->
    <div class="box3" v-if="quBaoFileArr.length">
      <div class="xinxi_box">
        <p class="title_box">执行取保候审</p>
        <div class="msg msg_on">

          <div v-for="(item,index) in quBaoFileArr" :key="index">
            <div class="img" v-if="item.imagetype == 'pdf'">
              <svg-icon  name="pdf" color="red" width="80px" height="100px"></svg-icon>
              <p >查看</p>
            </div>

            <div class="img" v-if="item.imagetype == 'png'">
              <el-image 
              style="width: 80px; height: 100px;border-radius: 6px;"
              :src="item.url_new" 
              :preview-src-list="[item.url_new]"/>
              <p >查看</p>
            </div>
            <div class="up_msg">
              <p class="name">{{item.filename}}</p>
              <p class="time">{{item.uploadtime_text}}</p>
            </div>
          </div>
          </div>
      </div>
    </div>

    <!-- 作证材料原件 -->
    <div class="box3" v-if="evidenceFileArr.length">
      <div class="xinxi_box">
        <p class="title_box">作证材料原件</p>
        <div class="msg">
          <div v-for="(item,index) in evidenceFileArr" :key="index">
            <div class="img" v-if="item.imagetype == 'pdf'">
              <svg-icon  name="pdf" color="red" width="100px" height="120px"></svg-icon>
              <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
            </div>

            <div class="img" v-if="item.imagetype == 'png'">
              <el-image 
              style="width: 120px; height: 146px;border-radius: 6px;"
              :src="item.url_new" 
              :preview-src-list="[item.url_new]"/>
              <!-- <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p> -->
            </div>
            <!-- <div class="up_msg">
              <p class="name">{{item.filename}}</p>
              <p class="time">{{item.uploadtime_text}}</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 日志 -->
    <div class="box5" v-if="operateLogArr.length">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="操作日志" name="first"></el-tab-pane>
        <el-tab-pane label="银行日志" name="second"></el-tab-pane>
      </el-tabs>

      <!-- 操作日志 -->
      <div class="list" v-if="activeName == 'first'">

        <div class="box" v-for="(item,index) in operateLogArr" :key="index">
          <div class="b_flex">
            <div class="line_box">
              <p class="mj_on">民警</p>
              <p class="line"></p>
            </div>
            <div class="msg">
              <p class="name">{{item.msg}}</p>
              <p class="text">时间：{{item.createtime}}</p>
              <!-- <p class="text">缴费金额：¥2,000.00</p> -->
            </div>
          </div>
          <p class="user">操作人：{{item.admin.nickname?item.admin.nickname:'--'}}</p>
        </div>
        <!-- <div class="box">
          <div class="b_flex">
            <div class="line_box">
              <p class="mj_on">民警</p>
              <p class="line"></p>
            </div>
            <div class="msg">
              <p class="name">发起了缴费申请</p>
              <p class="text">申请时间：2024-02-27 10:17:23</p>
              <p class="text">缴费金额：¥2,000.00</p>
            </div>
          </div>
          <p class="user">操作人：谭一天</p>
        </div>

        <div class="box">
          <div class="b_flex">
            <div class="line_box">
              <p class="xyr_on">嫌疑人</p>
              <p class="line"></p>
            </div>
            <div class="msg">
              <p class="name">上传文书</p>
              <p class="text">上传时间：2024-02-27 10:20:50</p>
              <p class="text">缴费金额：¥2,000.00</p>
            </div>
          </div>
          <p class="user">操作人：谭一天</p>
        </div>

        <div class="box">
          <div class="b_flex">
            <div class="line_box">
              <p class="mr_on">银行</p>
              <p class="line"></p>
            </div>
            <div class="msg">--</div>
          </div>
        </div>
        <div class="box">
          <div class="b_flex">
            <div class="line_box">
              <p class="mr_on">完成</p>
              <p class="line"></p>
            </div>
            <div class="msg">--</div>
          </div>
        </div> -->
      </div>

      <!-- 银行日志 -->
      <div class="bank_list" v-if="activeName == 'second'">
        <!-- <el-steps align-center>
          <el-step title="申请缴费">
            <template slot="description">
              <p class="text1">缴费金额：¥1,000.00</p>
              <p class="text2">2024-02-27 10:17:23</p>
              <p class="user">何小虎</p>
            </template>
          </el-step>
          <el-step title="会计审批">
            <template slot="description">
              <p class="text1">退款金额：¥1,000.00</p>
              <p class="text2">2024-02-27 10:17:23</p>
              <p class="user">陶何慧</p>
            </template>
          </el-step>
          <el-step title="主任审批">
            <template slot="description">
              <p class="text1">退款金额：¥1,000.00</p>
              <p class="text2">2024-02-27 10:17:23</p>
              <p class="user">熊静</p>
            </template>
          </el-step>
          <el-step title="领导审批">
            <template slot="description">
              <p class="text1">退款金额：¥1,000.00</p>
              <p class="text2">2024-02-27 10:17:23</p>
              <p class="user">李文峰</p>
            </template>
          </el-step>
          <el-step title="出纳支出">
            <template slot="description">
              <p class="text1">退款金额：¥1,000.00</p>
              <p class="text2">2024-02-27 10:17:23</p>
              <p class="user">周艳</p>
            </template>
          </el-step>
        </el-steps> -->
      </div>
    </div>


    <!-- 二维码 -->
    <el-dialog v-if="ewmVisible" title="" v-model="ewmVisible" width="1150">
      <scan-ewm :ewmUrl="ewmUrl" :ewmInfo="ewmInfo"></scan-ewm>
    </el-dialog>


    <!-- 完善办案日期 -->
    <el-dialog :show-close="false" v-model="updateDateShow">
      <update-bail-date :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 案件延期申请 -->
    <el-dialog :show-close="false" v-model="updateDelayShow">
      <update-bail-delay :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案预留银行卡 -->
    <el-dialog v-model="updateBankShow" :show-close="false">
      <update-bank :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 委托协办单位 -->
    <el-dialog v-model="updateEntrustShow" :show-close="false">
      <update-entrust :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案人 -->
    <el-dialog v-model="updatePoliceShow" :show-close="false">
      <update-police :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案单位 -->
    <el-dialog v-model="updateUnitShow" :show-close="false">
      <update-unit :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 完善当事人信息 -->
    <el-dialog v-model="updateUser" :show-close="false">
      <update-user :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref, computed, onMounted } from "vue";
import { defineProps, defineEmits } from "vue";
import { useRoute } from "vue-router";
import {getBindAtt} from "@/api/public";
import { revokeQrcode,closeBail,getPlayMore,qrcodeView,getQrCode,getBailInfo, getYlBank,getOperateLog,addJkb } from "@/api/bond/pay";
import ScanEwm from "./components/ScanEwm.vue";
import UpdateBailDate from "./components/UpdateBailDate.vue";
import UpdateBailDelay from "./components/UpdateBailDelay.vue";
import UpdateBank from "./components/UpdateBank.vue";
import UpdateEntrust from "./components/UpdateEntrust.vue";
import UpdatePolice from "./components/UpdatePolice.vue";
import UpdateUnit from "./components/UpdateUnit.vue";
import UpdateUser from "./components/UpdateUser.vue";
import { ElLoading } from 'element-plus'
import { ElNotification, ElMessageBox } from 'element-plus'

const route = useRoute();
const props = defineProps({
  mdl: {
    type: Object,
    required: true,
  },
  handleCloseDrawer: {
    type: Function,
    required: true,
  },
});

const id = computed(() => route.params.id); // 获取路由参数中的id

let activeName = ref("first");

onMounted(() => {
  getMsg();
});

// 获取案件详情-银行卡
let bailInfo = ref({});
let bankMsg = ref({});
let quBaoFileArr = ref([]);
let evidenceFileArr = ref([]);
let operateLogArr = ref([])
const getMsg = async () => {
  // 基本信息
  await getBailInfo({ process_id: id.value }).then((res) => {
    if (res.code == 1) {
      bailInfo.value = res.data;
    }
  });

  // 银行卡
  if (bailInfo.value.bail_id) {
    await getYlBank({ bail_id: bailInfo.value.bail_id }).then((res) => {
      if (res.code == 1) {
        bankMsg.value = res.data;
      }
    });
  }

  // 执行取保候审
  if (bailInfo.value.bail_id) {
    await getBindAtt({ bail_id: bailInfo.value.bail_id, group_id: 2 }).then(
      (res) => {
        if (res.code == 1) {
          res.data.map((item: {url_new: any; url: any; })=>{
            item.url_new = import.meta.env.VITE_APP_file_API+item.url
          })
          quBaoFileArr.value = res.data
        }
      }
    );
  }

  // 作证原件
  if (bailInfo.value.bail_id) {
    await getBindAtt({ bail_id: bailInfo.value.bail_id, group_id: 1 }).then(
      (res) => {
        if (res.code == 1) {
          res.data.map((item: {url_new: any; url: any; })=>{
            item.url_new = import.meta.env.VITE_APP_file_API+item.url
          })
          evidenceFileArr.value = res.data
        }
      }
    );
  }

  // 操作日志
  await getOperateLog({bail_id:id.value}).then(res=>{
    if(res.code == 1){
      operateLogArr.value = res.data.rows
    }
  })
};

// 文件预览
const filePreview = (url: string | URL | undefined)=>{
  window.open(url);
}

// 扫码缴费
let ewmVisible = ref(false)
let ewmInfo = ref({})
let ewmUrl = ref('')
const scanEwmClick = async()=>{

  const loading = ElLoading.service({
    lock: true,
    text: '生成中,请稍等...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  await getQrCode({process_id:bailInfo.value.id}).then(res=>{
    if(res.code == 1){
      ewmUrl.value = res.data.qrcode
    }else{
      loading.close()
      ElNotification.error(res.msg)
    }
  })
  if(ewmUrl.value){
    // await addJkb({process_id:bailInfo.value.id}).then(res=>{
    //   if(res.code == 1){
        
    //     loading.close()
    //   }else{
    //     loading.close()
    //     ElNotification.error(res.msg)
    //   }
    // })
    await qrcodeView({process_id:bailInfo.value.id}).then(res=>{
      if(res.code == 1){
        ewmInfo.value = res.data
        ewmVisible.value = true
        loading.close()
      }else{
        loading.close()
        ElNotification.error(res.msg)
      }
    })
  }
}

// 更多按钮-操作
let anniuStatus = ref({})// 按钮对象
const openButton = async(id: any)=>{
  getPlayMore({process_id:id}).then(res=>{
    if(res.code == 1){
      anniuStatus.value = res.data
    }
  })
}

// 关闭弹窗
const closeDrawer=()=>{
  updateDateShow.value = false
  updateDelayShow.value = false
  updateBankShow.value = false
  updateEntrustShow.value = false
  updatePoliceShow.value = false
  updateUnitShow.value = false
  updateUser.value = false
}

// 按钮点击
let bailId = ref(0) // 案件id
let updateDateShow = ref(false) // 完善办案日期弹窗
let updateDelayShow = ref(false) // 案件延期申请弹窗
let updateBankShow = ref(false) // 修改办案预留银行卡
let updateEntrustShow = ref(false) // 委托协办单位
let updatePoliceShow = ref(false) // 修改办案人
let updateUnitShow = ref(false) // 修改办案单位
let updateUser = ref(false) // 完善当事人信息

const downClick = (num: number,aId: number)=>{
  bailId.value = aId
  if(num == 1){ //案件延期申请
    updateDelayShow.value = true
  }
  if(num == 7){ //修改办案单位
    updateUnitShow.value = true
  }
  if(num == 4){ //修改办案日期
    updateDateShow.value = true
  }
  if(num == 5){ //委托协办单位
    updateEntrustShow.value = true
  }
  if(num == 8){ //修改办案人
    updatePoliceShow.value = true
  }
  if(num == 9){ //完善当事人信息
    updateUser.value = true
  }
  if(num == 6){ //修改办案预留银行卡
    updateBankShow.value = true
  }
  if(num == 3){// 关闭本案
    ElMessageBox.confirm(
    '确定要关闭本案?',
    '提示',
    {
      confirmButtonText: '确认关闭',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      closeBail({bail_id:id.value}).then(res=>{
        if(res.code == 1){
          ElNotification({ message:res.msg, type: "success" });
          getMsg()
        }else{
          ElNotification.error(res.msg);
        }
      })
    })
    .catch(() => {
    })
  }

  if(num == 10){// 撤销缴费申请
    ElMessageBox.confirm(
    '确定要撤销缴费申请?',
    '提示',
    {
      confirmButtonText: '确认撤销',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      revokeQrcode({process_id:id.value}).then(res=>{
        if(res.code == 1){
          ElNotification({ message:res.msg, type: "success" });
          getMsg()
        }else{
          ElNotification.error(res.msg);
        }
      })
    })
    .catch(() => {
    })
  }
}

</script>

<style lang="scss" scoped>
.head_title {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
}
.box1 {
  position: relative;
  border-radius: 8px;
  margin-top: 30px;
  height: 630px;
  .bk_bj {
    width: 100%;
    position: absolute;
    top: -10px;
    height: 400px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1c55d1 0%, rgba(255, 255, 255, 0) 46%);
  }
  .bk_bj_on {
    width: 100%;
    position: absolute;
    top: -10px;
    height: 400px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ff0000 0%, rgba(255, 255, 255, 0) 46%);
  }
  .nr {
    height: 100%;
    background: #fff;
    width: 99.6%;
    position: absolute;
    top: 0;
    left: 0.2%;
    border-radius: 8px;
    .mc {
      width: 100%;
    }
    .top_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 50px;
      .ewm {
        font-size: 24px;
        font-weight: 500;
        cursor: pointer;
        margin: -46px 62px 0 0;
        text-align: right;
        .an{
          border-radius: 8px;
          width: 176px;
          height: 50px;
          background: #1c55d1;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.3s;
          color: #fff;
          margin-bottom:15px;
          &:hover {
            background: #4979df;
          }
          img {
            width: 49px;
            height: 49px;
          }
        }
      }
    }
    .top_msg {
      display: flex;
      align-items: center;
      margin: -20px 0 0 28px;
      .left-icon {
        width: 85px;
        height: 80.6px;
      }
      .bz_msg {
        margin-left: 34px;
        .bz {
          display: flex;
          align-items: center;
          div {
            display: flex;
            align-items: center;
          }
          .icon {
            width: 30px;
            height: 30px;
            margin-right: 7px;
          }
          .text {
            font-size: 14px;
            color: #333333;
            margin-right: 16px;
          }
          .line {
            width: 108px;
            height: 11px;
            margin-right: 12px;
          }
        }
        .name {
          font-size: 32px;
          font-weight: 500;
          color: #333333;
          margin: 15px 0 15px 0;
        }
        .price {
          font-size: 15px;
          color: #44567c;
          display: flex;
          align-items: center;
          p {
            color: #1c55d1;
            font-size: 20px;
            font-weight: bold;
          }
          &.on {
            p {
              color: #ff1313;
            }
          }
        }
        .label {
          display: flex;
          margin-top: 10px;
          p {
            height: 20px;
            line-height: 20px;
            padding: 0 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 8px;
            &.on1 {
              background: #e6ecff;
              color: #1c55d1;
            }
            &.on2 {
              background: #ffeaea;
              color: #f64040;
            }
          }
        }
      }
    }

    .hx_line {
      margin: 40px 23px;
      height: 1px;
      background: #d8d8d8;
    }
  }
}
.xinxi_box {
  margin: 40px 23px 0 23px;
  .title_box {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
  }
  .box {
    width: 33%;
    display: inline-block;
    line-height: 40px;
    p {
      display: inline-block;
      font-size: 14px;
    }
    .title {
      color: #929292;
      margin-right: 16px;
    }
    .text {
      color: #333333;
    }
    .label {
      padding: 0 8px;
      height: 20px;
      line-height: 20px;
      background: #0046df;
      font-size: 12px;
      color: #fff;
      margin-left: 16px;
      border-radius: 3px;
    }
    .label1 {
      width: 30px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 3px;
      background: #c7d3ff;
      font-size: 12px;
      font-weight: 500;
      color: #1c55d1;
      margin-left: 6px;
    }
  }
}
.box2 {
  background: #fff;
  padding: 24px 0;
  margin-top: 20px;
  border-radius: 8px;
  .xinxi_box {
    margin-top: 0;
  }
  .bank_msg {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-top: 24px;
    padding-bottom: 26px;
    .head {
      height: 53px;
      line-height: 53px;
      border-radius: 8px 8px 0px 0px;
      background: #f6f8fa;
      padding: 0 20px;
      p {
        display: inline-block;
        font-size: 14px;
        color: #333333;
        font-weight: 600;
        width: 30%;
        &:last-child {
          width: 10%;
        }
      }
    }
    .c_ont {
      padding: 0 20px;
      padding-top: 26px;
      p {
        display: inline-block;
        font-size: 14px;
        color: #333333;
        width: 30%;
        &:last-child {
          width: 10%;
        }
      }
    }
  }
}
.box3 {
  background: #fff;
  padding: 24px 0;
  margin-top: 20px;
  border-radius: 8px;
  .xinxi_box {
    margin-top: 0;
    .msg {
    border-radius: 4px;
    padding: 20px 0;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    &>div{
      display: flex;
    }
    .img{
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
      margin:0 10px;
      p{
        position: absolute;
        bottom:0;
        right: 0;
        font-size:12px;
        width: 100%;
        height: 26px;
        background: #1F2E54;
        color:#fff;
        cursor: pointer;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .up_img {
      width: 100px;
      height: 120px;
    }
    .up_msg {
      line-height: 30px;
      text-align: left;
      margin-left: 12px;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      .name {
        color: #333333;
        font-size: 15px;
        font-weight: 500;
      }
      .text {
        font-size: 14px;
        color: #0046df;
        text-decoration: underline;
        cursor: pointer;
      }
      .time {
        color: #666666;
        font-size: 14px;
      }
    }
    &.msg_on{
      display: flex;
      justify-content: space-between;
      &>div{
        width: 45%;
        background: #F8F8F8;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        padding:20px;
      }
      .img{
        border-radius: 6px;
        p{
          width: 40px;
          height: 20px;
          border-radius: 0;
          background: rgba(0, 0, 0, 0.3);
          border-bottom-right-radius: 6px;
        }
      }
    }
  }
  }
}
.box4 {
  background: #fff;
  padding: 24px 0;
  margin-top: 20px;
  border-radius: 8px;
  .xinxi_box {
    margin-top: 0;
    .img_list {
      margin-top: 30px;
      p {
        display: inline-block;
        margin-right: 40px;
      }
    }
  }
}
.box5 {
  background: #fff;
  padding: 10px 30px 24px 30px;
  margin-top: 20px;
  border-radius: 8px;
  .el-tabs__item {
    color: #999999;
    font-size: 16px;
  }
  .el-tabs__item.is-active {
    color: #1c55d1;
    font-weight: bold;
  }
  .el-tabs__active-bar {
    background-color: #1c55d1 !important;
  }
  .el-tabs__item:hover {
    color: #1c55d1;
  }
  .list {
    .box {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        .line {
          display: none;
        }
      }
      .user {
        font-size: 12px;
        color: #666666;
      }
      .b_flex {
        display: flex;
      }
      .line_box {
        p {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .mj_on {
          color: #ec536b;
          background: #fef7f8;
          border: 1px solid #ffe1e2;
        }
        .xyr_on {
          color: #1c55d1;
          background: #f5f7ff;
          border: 1px solid #e4ebfd;
          text-align: center;
        }
        .mr_on {
          background: #ebedef;
          border: 1px solid #ebedef;
          color: #666666;
        }
        .line {
          width: 2px;
          height: 60px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border: 1px dashed #edf1f6;
          margin: 0 auto;
        }
      }
      .msg {
        margin-left: 23px;
        margin-top: 7px;
        .name {
          font-size: 14px;
          font-weight: 600;
          color: #3d3d3d;
        }
        .text {
          font-size: 12px;
          color: #666666;
          margin-top: 12px;
        }
      }
    }
  }
  .bank_list {
    padding: 40px 0;
    .el-step__head.is-wait {
      color: #1c55d1;
      border-color: #1c55d1;
    }
    .el-step__icon.is-text {
      background: #1c55d1;
      width: 12px;
      height: 12px;
      top: 2px;
    }
    .el-step__line {
      background-color: #1c55d1;
    }
    .el-step__title.is-wait {
      color: #3d3d3d;
      font-size: 14px;
      font-weight: 600;
    }
    .text1 {
      color: #666666;
    }
    .text2 {
      color: #999999;
      margin: 4px 0;
    }
    .user {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 4px;
      background: rgba(28, 85, 209, 0.15);
      margin-top: 6px;
      color: #1c55d1;
    }
  }
  
}
</style>
